import { FC } from "react"
import Taro, { useRouter } from '@tarojs/taro'
import transport from '../../resource/transport.png'
import complete from '../../resource/complete.png'
import cancel from '../../resource/cancel.png'
import avatar from '../../resource/avatar2.png'
import phone from '../../resource/phone.png'
import style from './style.less'

const Details: FC = () => {
  const router = useRouter()
  const param = JSON.parse(router.params.param as string)
  const status = Number(router.params.status)
  console.log('订单详情', param, status);

  return (
    <div className={style.root}>
      <div className="status">
        <div>{status === 1 ? "运输中" : status === 2 ? "已完成" : "已取消"}</div>
        <img src={status === 1 ? transport : status === 2 ? complete : cancel} alt="" />
      </div>
      <div className="title">装卸信息</div>
      <div className="address">
        <div className="zhuang">装</div>
        <div className="xie">卸</div>
        <div className="start">{param.loadAddress}<br /><i>{param.loadTime} 前装货</i></div>
        <div className="end">{param.unloadingAdress}<br /><i>{param.unloadingTime} 前卸货</i></div>
      </div>
      <div className="info">
        <div className="info-title">车货信息</div>
        <div className="info-container">
          <div>车辆</div>
          <div>{param.truckLength}米 {param.truckType}</div>
        </div>
        <div className="info-container">
          <div>货物</div>
          <div>{param.cargoName}，{param.truckWeight}吨，{param.cargoCapacipy}方，木箱</div>
        </div>
      </div>
      {status === 3 ? (
        <div className="payment" style={{ height: Taro.pxTransform(240) }}>
          <div className="payment-title">支付信息</div>
          <div className="payment-container">
            <div>总运费</div>
            <div><i>{param.totalFreightAmount}</i> 元/趟</div>
          </div>
          <div className="payment-container">
            <div>订金</div>
            <div><i>{param.driverPayDeposit}</i> 元{param.isBackDeposit ? '（退还）' : '（不退还）'}</div>
          </div>
        </div>
      ) : (
        <div className="payment">
          <div className="payment-title">支付信息</div>
          <div className="payment-container">
            <div>总运费</div>
            <div><i>{param.totalFreightAmount}</i> 元/趟</div>
          </div>
          <div className="payment-container">
            <div>订金</div>
            <div><i>{param.driverPayDeposit}</i> 元{param.isBackDeposit ? '（退还）' : '（不退还）'}</div>
          </div>
          <div className="payment-container">
            <div>服务费</div>
            <div><i>{param.estimateDistance}</i> 元</div>
          </div>
          <div className="payment-container">
            <div>净得运费</div>
            <div><i>{param.netDeposit}</i> 元</div>
          </div>
        </div>
      )}
      {status !== 3 ? (
        <div className="owner">
          <img src={avatar} alt="" />
          <div>{param.shipperName ? param.shipperName[0] : '林'}老板</div>
          <div>交易79 | 发货458 | 好评率98%</div>
          <img src={phone} alt="" onClick={() => { Taro.makePhoneCall({ phoneNumber: param.shipperTelephone }) }} />
        </div>
      ) : (
        <div className="complaint">
          <div>您需要帮助吗？</div>
          <div onClick={() => { Taro.makePhoneCall({ phoneNumber: '18801586136' }) }}>致电客服</div>
        </div>
      )}
    </div>
  )
}

export default Details